<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索框</title>
    <style>
        *{padding: 0; margin: 0;}

        .g-search{
            display: flex;
            background-color: red;
            height: 40px;
            align-items: center;
        }

        h2{
            font-weight: normal;
            font-size: 16px;
            width: 60px;
            text-align: center;
            color: white;
        }

        input{
            flex-grow: 1;
            height: 25px;
            border-radius: 8px;
            border: none;
            outline: none;
            text-indent: 5px;
        }
    </style>
    <!-- 
        如何实现搜索框
           1. 定义一个大的盒子 div
           2. 盒子里面放三个元素 
                分别是 城市  输入框  登录
           3. 设置外面盒子为弹性盒子布局  
                   display:flex;
               需面的三个元素成为项目元素
               水平主轴
               垂直交叉轴

           4. 固定两边元素，城市和登录项目元素 宽度
                 width:80px;
           5. 设置输入框元素，填充剩余空间。
                 flex-grow:1;

    
    -->
</head>
<body>
    <div class="g-search">
        <h2>城市</h2>
        <input type="text" placeholder="请输入搜索内容">
        <h2>登录</h2>
    </div>
</body>
</html>